<template>
	<view class="page home">
		<view class="home-banner"><image class="home-banner-image" src="../../static/banner.png" mode=""></image></view>
		<view class="home-inform">
			<view class="home-inform-title"><text>主要新闻</text></view>
			<swiper class="home-inform-swiper" indicator-dots>
				<swiper-item v-for="(item, index) in informArray" :key="index">
					<view class="swiper-item ">{{ item.content }}</view>
				</swiper-item>
			</swiper>
		</view>
		<view class="home-tools">
			<view class="home-tools-item" v-for="(item, index) in toolsArray" :key="index" :style="{ background: item.background }">
				<image class="image" :src="item.icon" mode=""></image>
				<view class="title">{{ item.title }}</view>
				<view class="division"></view>
				<view class="label">{{ item.label }}</view>
			</view>
		</view>
	</view>
</template>

<script>
import { getNotification } from '@/api/config.js';
export default {
	data() {
		return {
			title: 'Hello',
			informArray: [
				{
					content: '6月5日省里领导莅临创新大厦来视察，请相关单位做好接待准备工作'
				}
			],
			toolsArray: [
				{
					icon: '/static/WechatIMG2619.png',
					title: '左邻右舍',
					url: '/pages/empty/empty',
					background: '#369EFF',
					label: '快速、实时了解社区情况，实现系信息互通、避免信息孤岛'
				},
				{
					icon: '/static/WechatIMG2620.png',
					title: '问东问西',
					url: '/pages/empty/empty',
					background: '#FCB356',
					label: '只能资讯台，提供红色、招商、金融、物业、健康等信息咨询'
				},
				{
					icon: '/static/WechatIMG2621.png',
					title: '家长里短',
					url: '/pages/empty/empty',
					background: '#10BCCA',
					label: '社区交流，日常发牢骚，建议想法互动，一级针对性互动交流'
				},
				{
					icon: '/static/WechatIMG2622.png',
					title: '有拱有需',
					url: '/pages/empty/empty',
					background: '#708FFF',
					label: '促进区域企业需求互动，拉动区域内需，形成社区文化'
				}
			]
		};
	},
	onLoad() {
		this.handleLoadgNotification();
	},
	methods: {
		handleLoadgNotification() {
			let that = this;
			getNotification().then(data => {
				console.log('获取通知信息', data);
				that.informArray = [data.data];
			});
		}
	}
};
</script>

<style lang="scss">
page {
	background-color: rgba(235, 235, 2350, 0.1);
	height: 100vh;
}
.page.home {
	position: relative;
	padding-bottom: 30rpx;

	.home-inform {
		top: -100rpx;
		position: relative;
		margin: auto 30rpx;
		min-height: 50rpx;
		background: #ffffff;
		overflow: hidden;

		.home-inform-title {
			color: #0d91ff;
			font-size: 40rpx;
			padding: 20rpx;
			border-bottom: 1px solid #f0f0f0;
		}

		.home-inform-swiper {
			height: 180rpx;
			position: relative;
			font-weight: 280;
			color: #000000;
			font-size: 28rpx;
			line-height: 54rpx;
			font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
		}
		.home-inform-icon {
			position: absolute;
			right: 10rpx;
			bottom: 10rpx;
			width: 220rpx;
			height: 150rpx;
		}

		.swiper-item {
			padding: 20rpx;
			height: 180rpx;
		}
	}

	.home-tools {
		position: relative;
		margin: auto 30rpx;
		display: grid;
		top: 10rpx;
		grid-template-columns: 1fr 1fr;
		grid-gap: 30rpx;
		min-height: 100rpx;
		top: -50rpx;
		overflow: hidden;
		margin-bottom: 80rpx;
		.home-tools-item {
			position: relative;

			padding: 40rpx 20rpx;
			border-radius: 15rpx; //圆角
			color: #ffffff;
			.image {
				position: absolute;
				left: 0;
				top: 0;
				width: 100%;
				height: 100%;
			}
			.title {
				font-size: 32rpx;
				width: 100%;
				flex: 1;
				text-align: left;
				padding-top: 50rpx;
			}
			.division {
				position: relative;
				width: 40rpx;
				height: 4rpx;
				background-color: #ffffff;
				margin: 40rpx 0 20rpx 0;
			}
			.label {
				font-size: 22rpx;
				font-weight: 300;
			}
		}
	}
}
.home-banner {
	width: 750rpx;
	height: 500rpx;
	.home-banner-image {
		width: 100%;
		height: 100%;
	}
}
</style>
